<template>
  <view class="service-section">
    <!-- 左侧大图 -->
    <view class="service-item large" @click="handleClick(serviceList[0])">
        <image 
          :src="serviceList[0].image" 
          class="service-image"
          mode="aspectFill"
        />
      </view>
    
    <!-- 右侧小图区域 -->
    <view class="service-small-container">
      <view 
        class="service-item small" 
        v-for="(item, index) in serviceList.slice(1)" 
        :key="index + 1"
        @click="handleClick(item)"
      >
        <image 
          :src="item.image" 
          class="service-image"
          mode="aspectFill"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ServiceSection',
  data() {
    return {
      serviceList: [
        { 
          title: '一键报修', 
          image: '/static/home/service_img_big.jpg',
          path: '/pages/subPackageHome/repair/index' 
        },
        { 
          title: '设备信息', 
          image: '/static/home/service_img_small_1.jpg',
          path: '/pages/subPackageHome/device-list/index' 
        },
        { 
          title: '新装登记', 
          image: '/static/home/service_img_small_2.jpg',
          path: '/pages/register/index' 
        }
      ]
    }
  },
  methods: {
    handleClick(item) {
      console.log('点击特色服务:', item)
      uni.navigateTo({ url: item.path })
    }
  }
}
</script>

<style lang="scss" scoped>
.service-section {
  display: flex;
  gap: 20rpx;
  margin: 0 20rpx 20rpx;
  height: 160rpx;
  
  .service-item {
    position: relative;
    border-radius: 12rpx;
    overflow: hidden;
    
    &.large {
      flex: 1.2;
    }
    
    .service-image {
      width: 100%;
      height: 100%;
      border-radius: 12rpx;
    }
  }
  
  .service-small-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    
    .service-item {
      height: 70rpx; // (300rpx - 20rpx gap) / 2
    }
  }
}
</style>